<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no,viewport-fit=cover">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <title>幸运砸蛋</title>
  <link rel="stylesheet" href="/mobile/css/index.css" />
  <script src="/mobile/js/vue.js"></script>
  <script src="/mobile/js/axios.min.js"></script>
  <script src="/mobile/js/vant.min.js"></script>
  <script src="/mobile/js/crypto-js.js"></script>
  <script src="/mobile/js/aes.js"></script>
  <script src="/mobile/js/common.js"></script>
  <script src="/mobile/js/svga.min.js"></script>
  <script src="/mobile/js/dsbridge.js"></script>
  <style>
  * {
    margin: 0;
    padding: 0;
    -webkit-user-select: none;
    /* Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE10+/Edge */
    user-select: none;
    /* Standard syntax */
    list-style: none;
    overflow: hidden;
    background-color: transparent;
    transform: translate3d(0, 0, 0);
    font-family: 'Microsoft Yahei';
  }

  html,
  body {
    height: 100vh;
    background-color: transparent;
  }

  [v-cloak] {
    display: none;
  }

  #app {
    width: 100vw;
    height: 100%;
    font-size: 0;
    overflow: hidden;
    position: relative;
  }
  .box {
    position: fixed;
    width: 100%;
    height: 110vw;
    bottom: 0;
    left: 0;
    z-index: 99;
    background: url(bg.png) no-repeat;
    background-size: 100% 100%;
  }

  .close-btn {
    position: absolute;
    width: 6.4vw;
    height: 6.4vw;
    top: 2.67vw;
    right: 2.67vw;
    z-index: 99;
  }
  .dialog-btn {
    position: absolute;
    width: 13.33vw;
    height: 11.73vw;
    top: 12.267vw;
    right: 2.67vw;
    z-index: 99;
  }
  .record-btn {
    top: 25.6vw;
  }
  .tabs {
    width: 50vw;
    background-color: #58089f;
    border-radius: 50px;
    border: 2px solid #41007a;
    margin: 3vw auto 0;
  }
  .tabs span {
    display: inline-block;
    height: 9vw;
    line-height: 9vw;
    width: 50%;
    border-radius: 50px;
    text-align: center;
    color: #c57efa;
    font-size: 3.7vw;
  }
  .tabs .active {
    background-image: linear-gradient(180deg, #ffe598 0%, #f9c666 50%, #f3a634 100%), linear-gradient(#58089f, #58089f);
    color: #400f78;
  }
  .svga-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .player {
    position: relative;
    width: 32vw;
    height: 35.349vw;
    z-index: 2;
  }
  .player2 {
    position: relative;
/*    width: 55.814vw;*/
/*    height: 61.655vw;*/
    z-index: 2;
  }
  .shadow {
    width: 32vw;
    height: 14.66vw;
    background: url(shadow.png) no-repeat;
    background-size: contain;
    margin-top: -7.33vw;
    margin-left: -2.666vw;
  }
  .control-box {
    width: 100%;
    min-height: 34vw;
    background: url(13.png) no-repeat;
    background-size: 100% 100%;
    margin-top: -1.7vw;
  }
  .play-btn-box {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .play-btn {
    width: 20vw;
    height: 16vw;
    background: url(11.png) no-repeat;
    background-size: contain;
    margin: 0 2.2vw;
    text-align: center;

  }
  .play-btn.btn-active {
    height: 12.66vw;
    background: url(12.png) no-repeat;
    background-size: contain;
  }
  .btn-title {
    font-size: 3.73vw;
    font-weight: 600;
    color: #260048;
    margin-top: 2vw;
    margin-bottom: 0.5vw;
    line-height: 1;
  }
  .btn-shell {
    font-size: 2.4vw;
    color: #39006b;
  }
  .start-btn-box {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 4vw;
    padding-bottom: 1vw;
  }
  .start-btn {
    width: 30.53vw;
    height: 12.67vw;
    background: url(7.png) no-repeat;
    background-size: contain;
  }
  .play-tips {
    height: 84vw;
    font-size: 3.2vw;
    margin: 4vw 7vw;
    color: #fff;
    overflow-y: auto;
    box-sizing: border-box;
    line-height: 1.8;
  }
  .text-indent {
    text-indent: 6.4vw;
  }
  .van-overlay {
    z-index: 999;
  }

  .record {
    height: 96.8vw!important;
    background: url(record-box.png) no-repeat;
  }

  .pool {
    background: url(pool-box.png) no-repeat;
  }
  .iframe-box {
    width: 76vw;
    height: 102.4vw;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-size: contain;
    background-position: center center;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-radius: 10px;
  }
  .rule {
    width: 90vw!important;
  }
  .iframe {
    width: 100%;
    height: 100%;
  }
  .protocol-name {
    text-decoration: underline;
    font-weight: bold;
  }
  .award {
    width: 88.8vw;
    height: 103.2vw;
    background: url(award-box.png) no-repeat;
    padding-top: 10vw;
    position: relative;
    background-size: contain;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-position: center center;
    box-sizing: border-box;
  }
  .award-max {
    width: 88.8vw;
    height: 134.13vw;
    background: url(award-box-max.png) no-repeat;
    padding-top: 10vw;
    position: relative;
    background-size: contain;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-position: center center;
    box-sizing: border-box;
  }

  .award-contain {
    width: 100%;
    height: 72.46vw;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    overflow-y: auto;
  }
  .award-contain-max {
    height: 100.46vw!important;
  }
  .award-contain.center {
    justify-content: center;
    align-items: center;
  }
  .award-contain.left {
    justify-content: flex-start;
  }

  .award-box {
    overflow: hidden;
    min-height: 80px;
    padding: 5px;
    text-align: center;
    margin-bottom: 2vw;
  }

  .img-box {
    position: relative;
    font-size: 0;
    height: 25.33vw;
    background: url(award-wrapper.png) no-repeat center center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .prize-tag {
    width: 5.6vw;
    height: 2.9333vw;
    position: absolute;
    top: 0;
    left: 2px;
  }
  .prize-num {
    font-size: 2.4vw;
    color: #fff;
    position: absolute;
    top: 0;
    right: 2px;
  }
  .prize-img {
    width: 50%;
    height: 50%;
    object-fit: contain;
  }
  .prize-name {
    font-size: 2.4vw;
    color: #fff;
    text-align: center;
  }
  .award-bottom {
    position: absolute;
    bottom: 2.3333vw;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
  }
  .again {
    height: 10.66vw;
    margin-top: 3.2vw;
  }
  .total-shell {
    font-size: 2.6666vw;
    color: #acbbd9;
  }
  .shell-icon {
    width: 2.6666vw;
    vertical-align: middle;
    margin-bottom: 2px;
    margin-right: 2px;
  }

  </style>
</head>

<body>
  <div id="app" v-cloak>
    <div class="box">
      <div class="tabs" v-show="!isOpen">
        <span :class="{ active: tabIndex === 0 }" @click="setTabIndex(0)">幸运砸蛋</span>
        <span :class="{ active: tabIndex === 1 }" @click="setTabIndex(1)">规则</span>
      </div>
      <img v-show="!isOpen" id="close" class="close-btn" src="close-btn.png" alt="" @click="closeWebview">
      <template v-if="tabIndex === 0">
        <img v-show="!isOpen" class="dialog-btn" src="pool.png" alt="" @click="showDialog('poolShow')" />
        <img v-show="!isOpen" class="dialog-btn record-btn" src="record.png" alt="" @click="showDialog('recordShow')" />
      </template>
      <template v-if="tabIndex === 0">
        <div class="svga-box">
          <div class="player" id="player" v-show="!isOpen"></div>
          <div class="player2" id="player2" v-show="isOpen"></div>
          <div class="shadow" v-show="!isOpen"></div>
        </div>
        <div class="control-box" v-show="!isOpen">
          <div class="play-btn-box">
            <div class="play-btn" :class="{'btn-active': btnActiveIndex === index}" v-for="(item, index) in btnItems" :key="index" @click="setBtnActive(index)">
              <div class="btn-title">{{item.title}}</div>
              <div class="btn-shell">{{item.shell}}贝壳</div>
            </div>
          </div>
          <div class="start-btn-box">
            <div class="start-btn" @click="start"></div>
          </div>
        </div>
      </template>
      <template v-else>
        <div class="play-tips">
          <p class="text-indent">
            《幸运砸蛋》是贝贝语音提供的一项功能（或称“玩法”），本规则是<span class="protocol-name" @click="showProtocol">《贝贝语音用户协议》</span>的有效组成部分，具有同等法律效力，本规则未提及的部分，适用<span class="protocol-name" @click="showProtocol">《贝贝语音用户协议》</span>及贝贝语音平台其他规则、相关协议。用户使用本服务前必须仔细阅读本规则，一旦使用本服务将视为用户同意本协议内的所有事项。
          </p>
          <p style="color:#ffe598; font-size: 4vw;line-height: 2;">特别提醒</p>
          <p class="text-indent">1、本玩法概率机制为全站概率，用户参与本玩法，将可能出现获得奖品价值超出在本玩法中花费的贝壳数量，也可能出现获得礼物价值低于在本玩法中花费的贝壳数量；</p>
          <p class="text-indent">2、贝贝语音禁止未成年人参与互动消费，请参与贝贝语音互动活动的用户务必在注意保证健康的前提下适度娱乐，理性消费；</p>
          <p class="text-indent">3、用户在体验本玩法过程中，官方不收取任何手续费，也不以任何形式参与本玩法。</p>
          <p style="color:#ffe598; font-size: 4vw;line-height: 2;">重要提示</p>
          <p class="text-indent">
            1、《幸运砸蛋》功能可以提升用户在语音房间内的互动体验，仅供娱乐交流使用，用户获得的礼物仅限于在贝贝语音平台内消费使用，不得兑换成法定货币、现金或其他任何具有交换价值的物品，不得用于任何形式的盈利活动。
          </p>
          <p class="text-indent">
            2、禁止将获得的礼物进行线下交易，贝贝语音将严厉打击涉及第三方收购或与其关联的行为，用户的任何第三方线下交易行为需自行承担不利后果，对贝贝语音造成损害的，贝贝语音保留对该损害提出赔偿的权利。
          </p>
          <p class="text-indent">
            3、为保证游戏规则的公平性，禁止利用《幸运砸蛋》实施任何影响互动动公平性的行为，或利用产品BUG等产品缺陷参与直播互动，一旦发生上述有损游戏公平规则的行为，贝贝语音有权取消发放对应礼物，追回礼物，情节严重者，贝贝语音保留追究其法律责任的权利。
          </p>
          <p class="text-indent">4、为防止用户信息泄露及保障用户财产安全，贝贝语音提醒用户在消费时保管好账号、密码、短信验证码等登陆操作凭证。</p>
        </div>
      </template>
    </div>
    <van-overlay :show="awardShow" @click="closeAwardDialog">
      <div :class="awardList.length <= 6 ? 'award' : 'award-max'" @click.stop>
        <van-row :class="['award-contain', awardList.length <= 3 ? 'center' : 'left', awardList.length > 6 ? 'award-contain-max' : '']">
          <van-col span="8" v-for="(item, index) in awardList" :key="index" class="award-box">
            <div class="img-box">
              <div class="prize-num">x{{item.qty}}</div>
              <img class="prize-img" :src="item.url" alt="">
            </div>
            <div class="prize-name">{{item.name}}</div>
          </van-col>
        </van-row>
        <div class="award-bottom">
          <div class="total-shell">总价值： <img class="shell-icon" src="/mobile/img/recharge-shell.png" alt="">{{totalShell}}</div>
          <img class="again" src="again.png" @click="playAgain" alt="">
        </div>
      </div>
    </van-overlay>
    <van-overlay :show="protocolShow" @click="protocolShow = false">
      <div class="iframe-box rule" @click.stop>
        <iframe id="protocolShow" class="iframe" src="https://www.zgbbyy.com/mobile/common/index.html?id=4" frameborder="0"></iframe>
      </div>
    </van-overlay>
    <van-overlay :show="recordShow" @click="recordShow = false">
      <div class="iframe-box record" @click.stop>
        <iframe id="recordShow" class="iframe" :src="`/mobile/game/egg/record.html?type=1&token=${token}`" frameborder="0"></iframe>
      </div>
    </van-overlay>
    <van-overlay :show="poolShow" @click="poolShow = false">
      <div class="iframe-box pool" @click.stop>
        <iframe id="poolShow" class="iframe" :src="`/mobile/game/egg/pool.html?token=${token}`" frameborder="0"></iframe>
      </div>
    </van-overlay>
  </div>
  <script>
  new Vue({
    el: '#app',
    data: {
      token: '',
      roomId: '',
      activityId: null,
      deviceType: '',
      tabIndex: 0,
      btnActiveIndex: 0,
      btnItems: [{
        title: '砸1次',
        times: 0,
        shell: 500
      }, {
        title: '砸10次',
        times: 1,
        shell: 5000
      }, {
        title: '砸30次',
        times: 3,
        shell: 15000
      }],
      isOpen: false,
      player2: null,
      awardShow: false,
      totalShell: 0,
      awardList: [],
      protocolShow: false,
      recordShow: false,
      poolShow: false,
    },
    created () {
      this.token = dsBridge.call('getToken', '')
      this.roomId = dsBridge.call('getRoomId', '')
      var userAgent = navigator.userAgent
      if (userAgent.toLowerCase().includes('android')) {
        this.deviceType = '1'
      } else if (/(iPhone|iPad|iPod)/.test(userAgent)) {
        this.deviceType = '2'
      } else {
        // 鸿蒙
        this.deviceType = '3'
      }
      const parse = (queryStr) => {
        const str = queryStr.replace(/^\?/, '')
        return str.split('&').reduce((pre, key) => {
          const [k, v] = key.split('=')
          pre[decodeURIComponent(k)] = decodeURIComponent(v)
          return pre
        }, {})
      }
      
      var data = parse(location.search)
      this.activityId = data.activityId
    },
    mounted() {
      this.startAnimation()
    },
    methods: {
      showDialog (type) {
        if (!this.token) {
          this.$toast('用户信息获取失败')
          return
        }
        document.getElementById(type).contentWindow.location.reload(true)
        this[type] = true
      },
      startAnimation () {
        var player1 = new SVGA.Player('#player');
        var parser1 = new SVGA.Parser('#player');
        parser1.load('3.svga', function (videoItem) {
          player1.setVideoItem(videoItem)
          player1.startAnimation()
        })
        var player2 = new SVGA.Player('#player2');
        player2.loops = 1
        player2.clearsAfterStop = false
        var parser2 = new SVGA.Parser('#player2'); // 如果你需要支持 IE6+，那么必须把同样的选择器传给 Parser。
        parser2.load('3_1.svga', function (videoItem) {
          player2.setVideoItem(videoItem)
          player2.startAnimation()
        })
        this.player2 = player2
      },
      closeWebview () {
        dsBridge.call('closeWebview', '')
      },
      setTabIndex (tabIndex) {
        if (this.tabIndex === tabIndex) return
        this.tabIndex = tabIndex
        if (tabIndex === 0) {
          this.$nextTick(() => {
            this.startAnimation()
          })
        }
      },
      setBtnActive (index) {
        this.btnActiveIndex = index
      },
      start () {
        if (!this.activityId) {
          this.$toast('玩法信息获取失败')
          return
        }
        if (!this.roomId) {
          this.$toast('房间信息获取失败')
          return
        }
        if (!this.token) {
          this.$toast('用户信息获取失败')
          return
        }
        if (!this.deviceType) {
          this.$toast('设备信息获取失败')
          return
        }
        // 请求接口完了播放动画
        var times = this.btnItems[this.btnActiveIndex].times
        var query = `activityId=${this.activityId}&extractQty=${times}&roomId=${this.roomId}&systemType=${this.deviceType}`
        var str = ISCRYPT ? `args=${encrypt(query)}` : query
        this.$toast.loading({
          forbidClick: true,
          duration: 0
        })
        request.get(`/api/business/app/extractRecordMergeH5/extract?${str}`, {
          headers: {
            token: this.token
          }
        }).then(res => {
          this.$toast.clear()
          console.log(res)
          this.awardList = res.data
          this.totalShell = res.data[0].totalAwardCoin
          this.isOpen = true
          this.player2.startAnimation()
          this.player2.onFinished(() => {
            this.isOpen = false
            this.awardShow = true
          })
        })
      },
      closeAwardDialog () {
        this.awardShow = false
        setTimeout(() => {
          this.totalShell = 0
          this.awardList = []
        }, 500)
        
      },
      playAgain () {
        this.awardShow = false
        setTimeout(() => {
          this.start()
        }, 500)
      },
      showProtocol () {
        this.protocolShow = true
      }
    }
  })
  </script>
</body>

</html>